<template>
	<view style="border-radius: 28rpx;background-color: #fff;margin: 20rpx 24rpx;">
		<view class="tabs">
			<view class="tabs-item" :class="isProfession === false ? 'active-tabs-item' : ''" @click="isFastClick">
				<image class="button-icon" src='../../cutout/闪电@1x.png'></image>快捷
			</view>
			<view class="tabs-item" :class="isProfession === true ? 'active-tabs-item' : ''" @click="isProfessionClick">
				<image class="button-icon" src='../../cutout/专业@1x.png'></image>专业
			</view>
			<!-- <tui-tabs class="tabs-item" :tabs="tabs" sliderBgColor="linear-gradient(90deg, #87EFF1 0%, #77F7B4 99%);"
				sliderHeight="74"></tui-tabs> -->
		</view>
	</view>
	<view class="images-box">
		<!-- 
		background: linear-gradient(90deg, #87EFF1 0%, #77F7B4 99%);
		<view v-if="offerUser" class="title">活动背景</view> 
		<u-upload v-if="offerUser" :fileList="fileList" @afterRead="handleUpload" @delete="handleHeaderDel" multiple
			 :maxCount="1" width="140" height="140"></u-upload> 
		-->
		<view style="margin-bottom: 32rpx;">
			<u--input class="input-flex" :value="formData.title" border="none" @input="handleTitleChange" clearable
				placeholder="填写清晰的活动标题（必填 20字内）" placeholderStyle="font-size: 14px;color: #ADACAD;font-weight: 500;"
				:fontSize="28"></u--input>
		</view>
		<u-upload :fileList="picList" @afterRead="handlePicUpload" @delete="handlePicDel" multiple :maxCount="9"
			width="184" height="184" uploadText="添加图片" style="border-radius: 14rpx;">
		</u-upload>
		<u--textarea :value="formData.describeContent" @focus="handleTextareaFocus" @blur="handleTextareaBlur"
			confirmType="return" :maxlength="10000" auth @input="handleContentChange" border="none" clearable
			placeholder="描述一下活动的亮点,活动内容,介绍,时间,推荐的人群,提示等,叫上大家一起玩耍吧～" :fontSize="28" :height="textareaFocus ? 600 : 200"
			placeholderStyle="font-size: 12px;color: #CDCDCD;margin-top: 34rpx;"
			customStyle="height: 300rpx;"></u--textarea>
		<view style="display: flex;margin-right: 10rpx;align-items: center;">
			<view @click="handleChooseLocation"
				style="width: 123px;height: 24px;border-radius: 12px;background: #F5F5F5; display: flex;align-items: center;padding-left: 14rpx;margin-right: 10rpx;">
				<u-icon name="map" size="30"></u-icon>
				<text
					style="height: 19px;line-height: 19px;color: #ADACAD;font-size: 13px;font-weight: 500;margin: 0 10rpx;">选择集合地点</text>
				<u-icon name="play-right-fill" size="16" style="margin-right: 10rpx;"></u-icon>
			</view>
			<view @click="openDate()"
				style="width: 123px;height: 24px;border-radius: 12px;background: #F5F5F5; display: flex;align-items: center;padding-left: 14rpx;">
				<u-icon name="clock" size="30"></u-icon>
				<text
					style="height: 19px;line-height: 19px;color: #ADACAD;font-size: 13px;font-weight: 500;margin: 0 10rpx;">选择活动时间</text>
				<u-icon name="play-right-fill" size="16" style="margin-right: 10rpx;"></u-icon>
			</view>
			<!-- ref="calendar" rangeBgColor="#FFB803" -->
			<!-- <u-picker title="选择时间" mode="date" show="true" @close="closeDate" @cancel="closeDate"
				@confirm="handleDateChange" :closeOnClickOverlay="true" :columns="dateCols" keyName="date"></u-picker> -->
		</view>
		<!-- 
		<view class="tui-sort-time" v-if="dateShow">
			<tui-calendar activeBgColor="#FFB803" activeColor="#fff" rangeBgColor="rgba(255, 184, 3, .2)" isFixed
					:type="1" :minDate="minDate" maxDate="maxDate" @change="handleDateChange"></tui-calendar>
			</view>
		</view> 
		-->
		<view style="display: flex;justify-content: space-between; width: 100%;margin-top: 30rpx;align-items: center;">
			<view style="text-align: left;display: flex;" @click="showUserRange = true">
				<u-icon name="lock-open" size="40" style="margin-right: 20rpx;"></u-icon>
				<text style="height: 24px;line-height: 24px;color: #000000;font-size: 13px;font-weight: 350;">公开</text>
			</view>
			<!-- 是否公开 -->
			<u-picker :value="formData.isGk" :show="gkShow" @close="closeGK" @cancel="closeGK" @confirm="handleGKChange"
				:closeOnClickOverlay="true" :columns="options" keyName="label" confirmColor="#000"
				cancelColor="#000"></u-picker>
			<view style="display: flex;text-align: right;">
				<text
					style="height: 24px;line-height: 24px;color: #A6A6A6;font-size: 13px;margin-right: 10rpx;">同步至</text>
				<view style="background: #F5F5F5;width: 42px;height: 20px;border-radius: 10px;position: relative;">
					<image src="../../cutout/小红书@1x.png"
						style="width: 60rpx;height: 28rpx;position: absolute;right: 12rpx;bottom: 6rpx;"></image>
				</view>
			</view>
		</view>
		<!-- <view class="title">活动详情图片（选填）</view> -->
		<!-- <u-upload :fileList="describePic" @afterRead="handleDescribePicUpload" @delete="handleDescribePicDel" multiple
			:maxCount="10" width="140" height="140"></u-upload> -->
	</view>
	<view class="active-info">
		<view class="t-cell" style="border-bottom: 1px solid #F2F2F2;">
			<view class="t-cell-content">*活动分类</view>
			<view style="color: #CDCDCD;font-size: 14px;margin-right: 16rpx;">
				<u-input border="none" v-model="groupValue3" inputAlign="right" placeholder="请选择活动类型"></u-input>
			</view>
			<u-icon name="arrow-right" size="30" color="#CCCCCC" @click="showActivityType = true"></u-icon>
		</view>
		<view class="t-cell" style="border-bottom: 1px solid #F2F2F2;">
			<view class="t-cell-content">选择商家</view>
			<view style="color: #CDCDCD;font-size: 14px;margin-right: 16rpx;">
				<u-input border="none" v-model="groupValue3" inputAlign="right" placeholder="根据俱乐部等级享受优惠"></u-input>
			</view>
			<u-icon name="arrow-right" size="30" color="#CCCCCC" @click="showMerchant = true"></u-icon>
		</view>
		<view v-if="isProfession" class="t-cell" style="border-bottom: 1px solid #F2F2F2;">
			<view class="t-cell-content">*退款政策</view>
			<view style="color: #CDCDCD;font-size: 14px;margin-right: 16rpx;">
				<u-input border="none" v-model="groupValue3" inputAlign="right" placeholder="请选择退款政策"></u-input>
			</view>
			<u-icon name="arrow-right" size="30" color="#CCCCCC"></u-icon>
		</view>
		<view v-if="isProfession" class="t-cell" style="border-bottom: 1px solid #F2F2F2;">
			<view class="t-cell-content">女生是否优惠</view>
			<u-icon class="icon-color" :class="{'activeIcon': isActive}" name="checkmark-circle-fill" size="46"
				@click="toggleActiveIcon"></u-icon>
		</view>
		<view v-if="isProfession && isActive" class="t-cell">
			<view class="t-cell-content">优惠金额</view>
			<view style="color: #CDCDCD;font-size: 14px;margin-right: 16rpx;">
				<u-input border="none" v-model="groupValue3" inputAlign="right" placeholder="请输入优惠金额"></u-input>
			</view>
			<u-icon name="arrow-right" size="30" color="#CCCCCC"></u-icon>
		</view>
	</view>
	<view class="active-info">
		<view class="t-cell" style="border-bottom: 1px solid #F2F2F2;">
			<view class="t-cell-content">*活动人数</view>
			<view style="color: #CDCDCD;font-size: 14px;margin-right: 16rpx;">
				<u-input border="none" v-model="groupValue3" inputAlign="right"
					placeholder="请填写活动人数 最多支持 100人"></u-input>
			</view>
			<u-icon name="arrow-right" size="30" color="#CCCCCC"></u-icon>
		</view>
		<view class="t-cell" style="border-bottom: 1px solid #F2F2F2;">
			<view class="t-cell-content">*活动价格</view>
			<view style="color: #CDCDCD;font-size: 14px;margin-right: 16rpx;">
				<u-input border="none" v-model="groupValue3" inputAlign="right" placeholder="请填写没人多少钱"></u-input>
			</view>
			<u-icon name="arrow-right" size="30" color="#CCCCCC"></u-icon>
		</view>
		<view class="t-cell" style="border-bottom: 1px solid #F2F2F2;">
			<view class="t-cell-content">*报名条件</view>
			<view style="color: #CDCDCD;font-size: 14px;margin-right: 16rpx;">
				<u-input border="none" v-model="groupValue3" inputAlign="right" placeholder="请选择年龄范围"></u-input>
			</view>
			<u-icon name="arrow-right" size="30" color="#CCCCCC" @click="showRequirements = true"></u-icon>
		</view>
		<view class="t-cell" style="border-bottom: 1px solid #F2F2F2;">
			<view class="t-cell-content">*添加保险</view>
			<view style="color: #CDCDCD;font-size: 14px;margin-right: 16rpx;">
				<u-input border="none" v-model="groupValue3" inputAlign="right" placeholder="选择运动意外保险方案"></u-input>
			</view>
			<u-icon name="arrow-right" size="30" color="#CCCCCC" @click="showInsurance = true"></u-icon>
		</view>
		<view v-if="isProfession" class="t-cell" @click="openEndTime">
			<view class="t-cell-content">*报名截止</view>
			<view style="color: #CDCDCD;font-size: 14px;margin-right: 16rpx;">
				<u-input border="none" v-model="groupValue3" inputAlign="right" placeholder="请选择报名截止时间"></u-input>
			</view>
			<u-icon name="arrow-right" size="30" color="#CCCCCC"></u-icon>
		</view>
		<view v-if="isProfession" style="display: flex;justify-content: center;">
			<view
				style="position: relative;padding: 14rpx 34rpx 16rpx;width: 159px;height: 65px;border-radius: 14px;background: #F1F3F2;margin-bottom: 30rpx;margin-top: 10rpx;margin-right: 14rpx;">
				<view
					style="font-size: 14px;font-weight: 500;line-height: 24px;height:24px;color: #000000;margin-bottom: 4rpx;">
					候补</view>
				<view style="color: #CDCDCD;font-size: 12px;width: 84px;height: 24px;">满座后允许排队</view>
				<view
					style="border: 1px solid #D1D3D2;width: 24px;height: 24px;border-radius: 24px;position: absolute;top:9px;right: 14px;">
				</view>
			</view>
			<view
				style="position: relative;padding: 14rpx 34rpx 16rpx;width: 159px;height: 65px;border-radius: 14px;background: #F1F3F2;margin-bottom: 30rpx;margin-top: 10rpx;">
				<view
					style="font-size: 14px;font-weight: 500;line-height: 24px;height:24px;color: #000000;margin-bottom: 4rpx;">
					限购</view>
				<view style="color: #CDCDCD;font-size: 12px;width: 84px;height: 24px;">每人限购一张</view>
				<view
					style="border: 1px solid #D1D3D2;width: 24px;height: 24px;border-radius: 24px;position: absolute;top:9px;right: 14px;">
				</view>
			</view>
		</view>
	</view>
	<view class="group-btn">
		<button @click="addGroup">
			<u-icon name="plus" color="#64D2D8"></u-icon>
			<text style="margin-left: 20rpx;">新增分组</text>
		</button>
	</view>
	<view style="margin-left: 28rpx;">
		<view style="display: flex;align-items: center;margin-bottom: 24rpx;margin-right: 14rpx;">
			<image src="../../cutout/路径@1x.png" style="width: 26rpx;height: 34rpx;margin-right: 10rpx;"></image>
			<text style="color: #040203;font-size: 12px;margin-right: 10rpx;">报名截止：</text>
			<text style="color: #64D2D8;font-size: 12px;">活动开始前可报名</text>
		</view>
		<view style="display: flex;align-items: center;margin-bottom: 36rpx;">
			<image src="../../cutout/money@1x.png" style="width: 26rpx;height: 34rpx;margin-right: 10rpx;"></image>
			<text style="color: #040203;font-size: 12px;margin-right: 10rpx;">退款政策：</text>
			<text style="color: #64D2D8;font-size: 12px;">活动开始前24小时免费退还</text>
		</view>
	</view>
	<view style="display: flex;">
		<u-button
			customStyle="height: 86rpx;width: 87px;border-radius: 35rpx;background-color: #F2F4F3;border: 1px solid #E7E7E7;color:#000000;font-size:32rpx;"
			text="存草稿"></u-button>
		<u-button
			customStyle="height: 86rpx;width: 244px;border-radius: 35rpx;background-color: #63D1D6;color:#ffffff;font-size:32rpx;"
			text="发布" @click="handleSubmit"></u-button>
	</view>
	<!-- <view class="active-info">
		<view class="t-cell" style="border-bottom: 1px solid #F2F2F2;">
			<image src="https://static.wddzq.com/static/huodongleixing.png"></image>
			<view class="t-cell-content">*活动分类</view>
			<view style="color: #CDCDCD;font-size: 14px;margin-right: 16rpx;">请选择活动类型</view>
			<u-icon name="arrow-right" size="20" color="#CCCCCC"></u-icon>
		</view>
		<u-scroll-list :indicator="false">
			<view class="active-type-list" style="display: flex; flex-direction: row;">
				<view class="active-type active" v-if="noCategoryList" v-for="(item, index) in categoryList"
					:style="{display: formData.categoryId === item.id?'flex': 'none'}" :key="index" :data-item="item">
					<text>{{item.name}}</text>
				</view>
				<view class="active-type" v-else v-for="(item, index) in categoryList"
					:class="formData.categoryId === item.id ? 'active' : ''" :key="index" :data-item="item"
					@click="handleActivityClick"><text>{{item.name}}</text></view>
			</view>
		</u-scroll-list> 
		<view v-if="merchantList.length > 0" class="scroll-view-wrapper">
			<view class="merchant-list-wrapper">
				<view style="margin-bottom: 10rpx;">
					<image style="width: 104rpx;height: 34rpx;" src="https://static.wddzq.com/static/addr.png" />
				</view>
				<u-scroll-list :indicator="false">
					<view class="shop-list" style="display: flex; flex-direction: row;" v-if="merchantList.length > 0">
						<view class="shop-item" :class="formData.merchantId === item.id ? 'merchant-active' : ''"
							v-for="(item, index) in merchantList" @click.stop="handleMerchantClick(item)" :key="index"
							:data-item="item" @click="handleOpenMerchantClick(item.id)">
							<view class="shop-item-top-wrapper">
								<image mode="aspectFill" :src="item.logoUrl" />
								<view class="shop-content">
									<view class="shop-title">{{item.name}}</view>
									<view class="shop-desc">{{item.intro}}</view>
									<view v-if="formData.merchantId === item.id" style="position: absolute;right: 0; bottom: 0;width: 88rpx;height: 36rpx;line-height: 36rpx;text-align: center;border-radius: 40rpx;background-color: #fff;color: #1c1c1e;border: 1rpx solid #030303;font-size: 20rpx;" @click.stop="handleMerchantClick()">取消</view>
									<view v-else style="position: absolute;right: 0; bottom: 0;width: 88rpx;height: 36rpx;line-height: 36rpx;text-align: center;border-radius: 40rpx;background-color: #030303;color: #fff;border: 1rpx solid #030303;font-size: 20rpx;">选择</view>
									<u-button v-if="formData.merchantId === item.id" customStyle="position: absolute;right: 0; bottom: 0;width: 88rpx;height: 36rpx;border-radius: 18rpx;background-color: #fff;color: #1c1c1e;" color="#1c1c1e" text="取消" @click.stop="handleMerchantClick()"></u-button>
                  <u-button v-else customStyle="position: absolute;right: 0; bottom: 0;width: 88rpx;height: 36rpx;border-radius: 18rpx;font-size: 20rpx;" color="#1c1c1e" text="选择" @click.stop="handleMerchantClick(item)"></u-button>
								</view>
							</view>

							<view class="shop-item-bottom-wrapper">
								<text class="product-name">{{item.merchantProductVO.productName}}</text>
								<view class="product-info-wrapper">
									<view class="product-info-left-wrapper">
										<view class="product-price-wrapper">
											<text class="product-price-unit">￥</text>
											<text class="product-price">{{item.merchantProductVO.price}}</text>
										</view>
										<text class="product-tag">补贴价</text>
										<text
											class="product-original-price">￥{{item.merchantProductVO.originalPrice}}</text>
									</view>
									<text class="change-product-btn" @click.stop="()=>changeProduct(item)">更换</text>
								</view>
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<image class="hide-scroll-view" v-if="!noCategoryList" @click="hideScrollView" mode="widthFix"
				src="/static/publish/close-icon.png" />
		</view>
		<view class="t-cell" @click="handleChooseLocation">
			<image src="https://static.wddzq.com/static/didian.png"></image>
			<view class="t-cell-content">集合地点</view>
			<view class="t-cell-text"
				style="flex: 3;overflow: hidden;text-align: right;white-space: nowrap;text-overflow: ellipsis;">
				{{formData.name}}
			</view>
			<u-icon name="arrow-right" size="20" color="#333"></u-icon>
		</view>
				<map id="maps" style="width: 100%; height: 300rpx;" :longitude="formData.longitude" :latitude="formData.latitude" scale="16" show-location>
				</map>
		<view class="t-cell" @click="openDate">
			<image src="https://static.wddzq.com/static/shijian.png"></image>
			<view class="t-cell-content">活动日期</view>
			<view class="t-cell-text">
				{{activeDate}}
			</view>
			<u-icon name="arrow-right" size="20" color="#333"></u-icon>
		</view>
		<view class="t-cell" @click="openStartTime">
			<image src="https://static.wddzq.com/static/shijian.png"></image>
			<view class="t-cell-content">开始时间</view>
			<view class="t-cell-text t-cell-content-time">
				<view class="t-cell-time" @click="openStartTime">{{startTime}}</view>
			</view>
			<u-icon name="arrow-right" size="20" color="#333"></u-icon>
		</view>
		<view class="t-cell" @click="openEndTime">
			<image src="https://static.wddzq.com/static/shijian.png"></image>
			<view class="t-cell-content">结束时间</view>
			<view class="t-cell-text t-cell-content-time">
				<view class="t-cell-time" @click="openEndTime">{{endTime}}</view>
			</view>
			<u-icon name="arrow-right" size="20" color="#333"></u-icon>
		</view>
		<view class="t-cell" @click="openGK">
			<image src="https://static.wddzq.com/static/gongkai.png"></image>
			<view class="t-cell-content">{{ formData.showPublic ? '公开(所有地方可见)' : '私密（仅分享链接可见）' }}</view>
			<u-icon name="arrow-right" size="20" color="#333"></u-icon>
		</view>
		<view class="t-cell" @click="openActiveType">
			<image src="https://static.wddzq.com/static/huodongxingshi.png"></image>
			<view class="t-cell-content">活动形式</view>
			<view class="t-cell-text">{{ types.find(item => item.value === formData.formType)?.label }}</view>
			<u-icon name="arrow-right" size="20" color="#333"></u-icon>
		</view>
	</view> -->
	<!-- <view class="active-info">
		<view class="t-cell">
			<image src="https://static.wddzq.com/static/huodongrenshu.png"></image>
			<view class="t-cell-content">活动人数（不包括你自己）</view>
			<u--input class="input-flex" :disabled="formType === 2 || formType === 3 || formType === 4" border="none"
				type="number" inputAlign="right" :fontSize="28" :value="formData.maxSignUpCount"
				@input="handleNumberChange" placeholderStyle="font-size: 28rpx;" customStyle="height: 40rpx;"
				placeholder="请输入活动人数"></u--input>
		</view>
		<view class="t-cell" @click="openFee">
			<image src="https://static.wddzq.com/static/meirenfeiyong.png"></image>
			<view class="t-cell-content">每人费用</view>
			<view class="t-cell-text">{{ formData.chargeType === 1 ? 'AA' : '免费' }}/{{formData.priceShow || '0'}}</view>
			<u-icon name="arrow-right" size="20" color="#333"></u-icon>
		</view>
		<view class="t-cell">
			<image src="https://static.wddzq.com/static/shifouyouhui.png"></image>
			<view class="t-cell-content">女生是否优惠</view>
			 免费没有女生优惠 
			<u-switch :activeValue="1" :inactiveValue="0" :disabled="chargeType === 2" size="36" asyncChange
				:value="formData.discountType" @change="handleDiscountSwitchChange" activeColor="#FFB803"></u-switch>
		</view>
		<view class="yh-box" style="position: relative;" v-if="formData.discountType === 1">
			<text style="position: absolute;top: 25rpx;left:20rpx;">优惠金额</text>
			<text style="position: absolute;top: 28rpx;right:30rpx;">¥</text>
			<u--input class="input-flex" placeholder="请输入优惠金额" border="none" type="digit"
				placeholderStyle="font-size: 28rpx;" inputAlign="right" customStyle="padding-right: 30rpx;"
				v-model="formData.discountedPrice" @input="handleDiscountChange"></u--input>
		</view>
		<view class="t-cell" @click="openPayway">
			<image src="https://static.wddzq.com/static/shoukuanfangshi.png"></image>
			<view class="t-cell-content">收款方式</view>
			<view class="t-cell-text">{{ paywayCols[0].find(item => item.value === formData.payWay)?.label }}</view>
			<u-icon name="arrow-right" size="20" color="#333"></u-icon>
		</view>
		<view class="t-cell">
			<image src="../../static/logo.png"></image>
			<view class="t-cell-content">报名截止时间</view>
			<u-icon name="arrow-right" size="20" color="#333"></u-icon>
		</view>
		<view class="t-cell" @click="openPolicy">
			<image src="https://static.wddzq.com/static/tuikuanzhengce.png"></image>
			<view class="t-cell-content">退款政策</view>
			<view class="t-cell-text">{{ policyCols[0].find(item => item.value === formData.cancelFreeType)?.label }}</view>
			<u-icon name="arrow-right" size="20" color="#333"></u-icon>
		</view>
	</view> -->
	<!-- <view style="font-size: 22rpx;color:#8b8b8b;padding: 0 24rpx;">请务必根据活动事项，选择合理的退款政策，如选择不当造成损失自行承担！</view> -->
	<tui-datetime ref="startTime" confirmColor="#FFB803" :type="4" @confirm="handleStartTimeChange"></tui-datetime>
	<tui-datetime ref="endTime" confirmColor="#FFB803" :type="4" @confirm="handleEndTimeChange"></tui-datetime>
	<tui-datetime ref="activeDate" confirmColor="#FFB803" :type="4" @confirm="handleDateChange"></tui-datetime>
	<!-- 活动形式 -->
	<u-popup :show="activeTypeShow" :round="18" mode="bottom" @close="closeActiveType">
		<view class="popup-container">
			<view class="header">
				<view class="header-btn header-left" @click="closeActiveType">取消</view>
				<view class="header-title">活动形式</view>
				<view class="header-btn right" @click="handleActiveTypeClick">确定</view>
			</view>
			<view class="active-type-list mt-40 mb-40">
				<view class="active-type-item" v-for="(item,index) in types"
					:class="formType === item.value ? 'active' : ''" :data-item="item" @click="handleTypeChange"
					:key="index">{{item.label}}</view>
			</view>
			<view class="sex-type">
				<view class="sex-type-item" v-if="formType === 2 || formType === 4">
					<image src="https://static.wddzq.com/static/nv.png"></image>
					<text>女生</text>
					<tui-numberbox iconBgColor="#f2f2f2" backgroundColor="transparent" :value="maxWomanCount"
						@change="handleWomanChange"></tui-numberbox>
				</view>
				<view class="sex-type-item" v-if="formType === 3 || formType === 4">
					<image src="https://static.wddzq.com/static/nan.png"></image>
					<text>男生</text>
					<tui-numberbox iconBgColor="#f2f2f2" backgroundColor="transparent" :value="maxManCount"
						@change="handleManChange"></tui-numberbox>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
	</u-popup>
	<!-- 每人费用 -->
	<u-popup :show="feeShow" :round="18" mode="bottom" @close="closeFee">
		<view class="popup-container" style="height: 400rpx;">
			<view class="header">
				<view class="header-btn header-left" @click="closeFee">取消</view>
				<view class="header-title">每人费用</view>
				<view class="header-btn right" @click="handlePriceClick">确定</view>
			</view>
			<view style="height: 40rpx;"></view>
			<view class="active-type-list">
				<view class="active-type-item" :class="chargeType === 1 ? 'active' : ''" @click="handleChargeType(1)">AA
				</view>
				<view class="active-type-item" :class="chargeType === 2 ? 'active' : ''" @click="handleChargeType(2)">免费
				</view>
			</view>
			<view style="height: 30rpx;"></view>
			<view class="money-box" style="position: relative;" v-if="chargeType === 1">
				<text class="money-title" style="position: absolute;top: 25rpx;left:20rpx;">活动金额</text>
				<text style="position: absolute;top: 28rpx;right:20rpx;">¥</text>
				<u--input class="input-flex" :value="price" @input="handlePriceChange"
					customStyle="padding-right: 30rpx;" placeholder="请输入活动金额" type="digit"
					placeholderStyle="font-size: 28rpx;" inputAlign="right" border="none"></u--input>
			</view>
			<view style="height: 100rpx;"></view>
		</view>
	</u-popup>
	<!-- 选择商家 -->
	<u-popup :show="showMerchant" :round="18" mode="bottom" @close="closeMerchant">
		<view class="popup-container" style="height: 600px;">
			<view class="header">
				<view class="header-btn header-left" @click="closeMerchant">取消</view>
				<view class="header-title">选择商家</view>
				<view class="header-btn right" @click="handleMerchantClick">确定</view>
			</view>
			<view>
				<view class="searchView" style="margin: 12px auto;">
					<view style="height: 64rpx;">
						<view class="searchType  flex-middle flex-display">
							<view style="margin-left: 10rpx;">
								<u-icon name="search" size="50" color="#CCCCCC"></u-icon>
							</view>
							<u-input v-model="searchValue" type="text" border="false" placeholder="搜索用户、俱乐部、活动"
								placeholderStyle="font-size: 12px;color: #A9A9A9;" @change="searchClick" />
						</view>
					</view>
				</view>
				<view style="display: flex; margin: 12px 31px 19px 10px;">
					<view style="width: 101px;height: 26px;border-radius: 13px;background: #F5F5F5;display: flex;align-items: center;justify-content: center;margin-right: 20rpx;">
						<text style="color: #666363;font-size: 13px;">智能排序</text>
						<image src="https://static.wddzq.com/static/xiala_select.png"
							style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view style="width: 63px;height: 26px;border-radius: 13px;background: #F5F5F5;display: flex;align-items: center;justify-content: center;margin-right: 20rpx;">
						<text style="color: #666363;font-size: 13px;">时间</text>
						<image src="https://static.wddzq.com/static/xiala_select.png"
							style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view style="width: 63px;height: 26px;border-radius: 13px;background: #F5F5F5;display: flex;align-items: center;justify-content: center;margin-right: 20rpx;">
						<text style="color: #666363;font-size: 13px;">分类</text>
						<image src="https://static.wddzq.com/static/xiala_select.png"
							style="width: 40rpx;height: 40rpx;"></image>
					</view>
					<view style="width: 74px;height: 26px;border-radius: 13px;background: #F5F5F5;display: flex;align-items: center;justify-content: center;">
						<text style="color: #666363;font-size: 13px;">静安区</text>
						<image src="https://static.wddzq.com/static/xiala_select.png"
							style="width: 40rpx;height: 40rpx;"></image>
					</view>
				</view>
				
				<!-- <view class="tui-header">
					<view class="tui-header-top">
						
						<view class="tui-sort-dropdown" v-if="dropShow">
							<view class="tui-drop-item" :class="filterData.sortType === item.value ?'active':''"
								v-for="(item,index) in sortData" :key="index" @click="handleSortClick"
								:data-index="index">
								<text class="tui-ml " style="text-align: left;">{{item.name}}</text>
							</view>
						</view>
						<view class="tui-top-item" @click="handleClick('drop')">
							{{ sortData.find(item => item.value === filterData.sortType)?.name }} 
							<text class="tui-bold" :class="dropShow ? 'active' : ''">智能排序</text>
							<image src="https://static.wddzq.com/static/xiala_select.png"
								style="width: 40rpx;height: 40rpx;"></image>
							<tui-icon class="tui-top-icon" name="turningdown" :size="20" :color="dropShow ? '#ffb803' : '#333'" :bold="true"></tui-icon>
						</view>
						<view class="tui-top-item tui-screen" :class="dropShow ? 'active' : ''"
							@click="handleClick('date')">
							<text class="tui-bold">全部时间</text>
							<tui-icon name="turningdown" class="tui-top-icon" :size="20" color="#333" :bold="true"></tui-icon>
							<image src="https://static.wddzq.com/static/xiala_select.png"
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
						
						<view class="tui-sort-time" v-if="dateShow">
							<view style="padding-bottom: 20rpx;">
								<tui-calendar :dateIndex='dateIndex' activeBgColor="#FFB803" activeColor="#fff"
									rangeBgColor="rgba(255, 184, 3, .2)" :type="2" :minDate="minDate"
									maxDate="2099-12-01" @change="handleDateChange"></tui-calendar>
							</view>
						</view>
						
						<view class="tui-sort-category" v-if="categoryShow">
							<scroll-view scroll-y :style="{height: ((systemInfo?.screenHeight || 300) - 500) + 'px'}">
								<view>
									<view class="category-header">最近选择</view>
									<view class="category-list">
										<view class="category-list-item" @click="handleCateClick(item)"
											v-for="item in categoryData" :key="item.id">{{item.name}}</view>
									</view>
								</view>
								<view>
									<view class="category-header">全部分类</view>
									<view class="category-list">
										<view class="category-list-item" @click="handleCateClick(item)"
											v-for="item in categoryData" :key="item.id">{{item.name}}</view>
									</view>
								</view>
							</scroll-view>
						</view>
						<view class="tui-top-item tui-screen" :class="categoryShow ? 'active' : ''"
							@click="handleClick('category')">
							<text class="tui-bold">分类</text>
							<image src="https://static.wddzq.com/static/xiala_select.png"
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
						<view class="tui-top-item tui-screen" @tap="handleCity">
							<text class="tui-bold">静安区</text>
							<image src="https://static.wddzq.com/static/xiala_select.png"
								style="width: 40rpx;height: 40rpx;"></image>
						</view>
					</view>
				</view> -->
				<view style="background: #FFFFFF;position: relative;">
					<view style="width: 375px;height: 141px;background: #FFFFFF;position: relative;">
						<view>
							<image src="../../cutout/sjtp@1x.png"
								style="width: 105px;height: 75px;border-radius: 8px;margin: 4px 0 0 11px;">
							</image>
							<view
								style="position: absolute;left: 121px;top: 6px;width: 184px;height: 21px;color: #000000;font-size: 15px;font-weight: 350;line-height: 21px;">
								地铁逃生NK俱乐部
							</view>
							<view
								style="position: absolute;left: 121px;top: 29px;width: 88px;height: 21px;color: #939393;font-size: 12px;line-height: 21px;">
								周一至周日 全天
							</view>
							<view
								style="position: absolute;left: 122px;top: 56px;width: 119px;height: 21px;color: #939393;font-size: 12px;line-height: 21px;">
								滨河国际大厦B座1302
							</view>
							<view
								style="position: absolute;left: 327px;top: 57px;width: 33px;height: 21px;color: #000000;font-size: 11px;line-height: 21px;">
								8.8Km
							</view>
						</view>
						<view
							style="height: 21px;display: flex;position: relative;margin-top: 5rpx;align-items: center;justify-content: space-between;;margin-left: 71px;">
							<view
								style="justify-content: center;display: flex;align-items: center;width: 42px;height: 16px;border-radius: 8px;background: #EBFCFE;border: 1px solid #64D1CE;margin-right: 10rpx;">
								<text style="height: 21px;font-size: 11px;color: #64D1CE;line-height: 21px;">拼桌票</text>
							</view>
							<view
								style="justify-content: center;display: flex;align-items: center;width: 16px;height: 16px;border-radius: 4px;background: #FAE7DA;margin-right: 10rpx;">
								<view style="width: 12px;height: 17px;font-size: 11px;color: #DB5917;">惠</view>
							</view>
							<view style="width: 6px;height: 14px;font-size: 10px;color: #DB5917;margin-right: 10rpx;">¥
							</view>
							<view style="width: 30px;height: 19px;font-size: 18px;color: #DB5917;margin-right: 10rpx;">
								189</view>
							<view
								style="justify-content: center;display: flex;align-items: center;width: 37px;height: 17px;border-radius: 4px;box-sizing: border-box;border: 0.5px solid #EDC2AA;margin-right: 20rpx;">
								<image src="../../cutout/xiaj@1x.png"
									style="width: 7px;height: 8px;background: #E4693E;">
								</image>
								<view style="width: 14px;height: 10px;font-size: 10px;color: #DB5917;">9.5</view>
								<view style="width: 11px;height: 11px;font-size: 11px;color: #DB5917;">折</view>
							</view>
							<view style="width: 7px;height: 21px;font-size: 11px;line-height: 21px;color: #ABABAB;">¥
							</view>
							<view
								style="width: 20px;height: 21px;font-size: 11px;line-height: 21px;color: #ABABAB;margin-right: 26rpx;">
								329
							</view>
							<view style="width: 100px;height: 21px;font-size: 10px;line-height: 21px;color: #939393;">
								单人门票+往返接送</view>
						</view>
						<view
							style="height: 21px;display: flex;position: relative;margin-top: 5rpx;align-items: center;justify-content: space-between;;margin-left: 71px;">
							<view
								style="justify-content: center;display: flex;align-items: center;width: 42px;height: 16px;border-radius: 8px;background: #EBFCFE;border: 1px solid #64D1CE;margin-right: 10rpx;">
								<text style="height: 21px;font-size: 11px;color: #64D1CE;line-height: 21px;">团购票</text>
							</view>
							<view
								style="justify-content: center;display: flex;align-items: center;width: 16px;height: 16px;border-radius: 4px;background: #FAE7DA;margin-right: 10rpx;">
								<view style="width: 12px;height: 17px;font-size: 11px;color: #DB5917;">惠</view>
							</view>
							<view style="width: 6px;height: 14px;font-size: 10px;color: #DB5917;margin-right: 10rpx;">¥
							</view>
							<view style="width: 30px;height: 19px;font-size: 18px;color: #DB5917;margin-right: 10rpx;">
								189</view>
							<view
								style="justify-content: center;display: flex;align-items: center;width: 37px;height: 17px;border-radius: 4px;box-sizing: border-box;border: 0.5px solid #EDC2AA;margin-right: 20rpx;">
								<image src="../../cutout/xiaj@1x.png"
									style="width: 7px;height: 8px;background: #E4693E;">
								</image>
								<view style="width: 14px;height: 10px;font-size: 10px;color: #DB5917;">9.5</view>
								<view style="width: 11px;height: 11px;font-size: 11px;color: #DB5917;">折</view>
							</view>
							<view style="width: 7px;height: 21px;font-size: 11px;line-height: 21px;color: #ABABAB;">¥
							</view>
							<view
								style="width: 20px;height: 21px;font-size: 11px;line-height: 21px;color: #ABABAB;margin-right: 26rpx;">
								329
							</view>
							<view style="width: 100px;height: 21px;font-size: 10px;line-height: 21px;color: #939393;">
								多人通用门票+接送</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
	<!-- 选择活动类型 -->
	<u-popup :show="showActivityType" :round="18" mode="bottom" @close="closeActivityType">
		<view class="popup-container" style="height: 500px;">
			<view class="header">
				<view class="header-btn header-left" @click="closeActivityType">取消</view>
				<view class="header-title">选择活动类型</view>
				<view class="header-btn right" @click="handleActivityTypeClick">确定</view>
			</view>
			<view>
				<view class="city-list">
					<view class="city-list-label" :class="clickA === true ? 'active': ''"
						@click="clickA = true; clickB = false;">娱乐活动</view>
					<view class="city-list-label" :class="clickB === true ? 'active': ''"
						@click="clickB = true; clickA = false;">户外活动</view>
				</view>
				<view class="searchView">
					<view class="searchType flex-middle flex-display">
						<view style="margin-left: 10rpx;">
							<u-icon name="search" size="50" color="#CCCCCC"></u-icon>
						</view>
						<u-input v-model="searchValue" type="text" border="false" placeholder="搜索用户、俱乐部、活动"
							placeholderStyle="font-size: 12px;color: #A9A9A9;" @change="searchClick" />
					</view>
				</view>
				<view class="tips" style="margin: 14px 0 12px 0;">
					最近选择
				</view>
				<view class="boxall">
					<view class="box1">
						<text class="text1">飞盘</text>
					</view>
					<view class="box1">
						<text class="text1">橄榄球</text>
					</view>
					<view class="box1">
						<text class="text1">滑板</text>
					</view>
					<view class="box1">
						<text class="text1">飞盘</text>
					</view>
				</view>
				<view class="tips" style="margin: 14px 0 12px 0;">
					全部分类
				</view>
				<view class="boxall">
					<view class="box1">
						<text class="text1">飞盘</text>
					</view>
					<view class="box1">
						<text class="text1">橄榄球</text>
					</view>
					<view class="box1">
						<text class="text1">滑板</text>
					</view>
					<view class="box1">
						<text class="text1">网球</text>
					</view>
					<view class="box1">
						<text class="text1">飞盘</text>
					</view>
					<view class="box1">
						<text class="text1">橄榄球</text>
					</view>
					<view class="box1">
						<text class="text1">滑板</text>
					</view>
					<view class="box1">
						<text class="text1">网球</text>
					</view>
					<view class="box1">
						<text class="text1">飞盘</text>
					</view>
					<view class="box1">
						<text class="text1">橄榄球</text>
					</view>
					<view class="box1">
						<text class="text1">滑板</text>
					</view>
					<view class="box1">
						<text class="text1">网球</text>
					</view>
					<view class="box1">
						<text class="text1">飞盘</text>
					</view>
					<view class="box1">
						<text class="text1">橄榄球</text>
					</view>
					<view class="box1">
						<text class="text1">滑板</text>
					</view>
					<view class="box1">
						<text class="text1">网球</text>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
	<!-- 选择报名条件 -->
	<u-popup :show="showRequirements" :round="18" mode="bottom">
		<view class="popup-container" style="height: 634rpx;" @close="closeRequirements">
			<view class="header">
				<view class="header-btn header-left" @click="closeRequirements">取消</view>
				<view class="header-title">选择报名条件</view>
				<view class="header-btn right" @click="handleRequirementsClick">确定</view>
			</view>
			<view style="display: flex;flex-direction: column;margin-top: 46rpx;margin-bottom: 46rpx;">
				<view style="display: flex;">
					<u-icon name="checkmark-circle-fill" size="46" color="#63D1D6"></u-icon>
					<text
						style="margin-left: 10px;font-size: 14px;font-weight: 350;height: 20px;line-height: 20px;color: #000000;">是否开启（加价申请通道）</text>
					<tui-icon name="about" color="#7D7D7D" size="36rpx"></tui-icon>
				</view>
				<view style="display: flex;flex-direction: column;">
					<picker-view :value="value" @change="bindChange"
						style="width: 374px;height: 200px;margin-top: 33px;">
						<picker-view-column>
							<view class="item" v-for="item in types" :key="index">{{item.label}}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="item in ageArgs" :key="index">{{item}}岁</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" v-for="item in ageArgs" :key="index">{{item}}岁</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>
	</u-popup>
	<!-- 选择报名用户范围 -->
	<u-popup :show="showUserRange" :round="18" mode="bottom" @close="closeUserRange">
		<view class="popup-container" style="height: 470rpx;">
			<view class="header">
				<view class="header-btn header-left" @click="closeUserRange">取消</view>
				<view class="header-title">选择报名用户范围</view>
				<view class="header-btn right" @click="handleUserRangeClick(e)">确定</view>
			</view>
			<view style="display: flex;flex-direction: column;">
				<view class="option" v-for="(item, index) in options" :key="index" @click="selectOption(index)">
					{{ item.label }}
					<view class="checkmark" v-if="selectedIndex === item.index">
						<image src="../../cutout/对号@1x.png" style="width:32rpx;height: 32rpx;"></image>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
	<!-- 选择运动意外保障方案 -->
	<u-popup :show="showInsurance" :round="18" mode="bottom" @close="closeInsurance">
		<view class="popup-container" style="height: 470rpx;">
			<view class="header">
				<view class="header-btn header-left" @click="closeInsurance">取消</view>
				<view class="header-title">选择运动意外保障方案</view>
				<view class="header-btn right" @click="handleInsuranceClick">确定</view>
			</view>
			<view style="display: flex;justify-content: center;margin: 0 10rpx;">
				<view class="insuarance-item" style="margin-right: 20rpx;">
					<view>
						<image class="insuarance-image" src="../../cutout/保@1x.png"></image>
					</view>
					<view class="insuarance-bg-t1">无保障</view>
					<view class="insuarance-bg-t2">自行承担风险</view>
					<view class="insuarance-bg-t3">
						<view class="insuarance-bg-t32" style="margin-left: 27rpx;">-</view>
					</view>
					<view class="insuarance-bg-t4">-</view>
				</view>
				<view class="insuarance-item" style="position: relative;margin-right: 20rpx;">
					<view>
						<image class="insuarance-image" src="../../cutout/保@1x.png"></image>
						<view class="insuarance-bg">
							<text class="insuarance-bg-text">限时优惠</text>
						</view>
					</view>
					<view class="insuarance-bg-t1">标准保障</view>
					<view class="insuarance-bg-t2">10万保额</view>
					<view class="insuarance-bg-t3">
						<view class="insuarance-bg-t31">¥2</view>
						<view class="insuarance-bg-t32">/人</view>
					</view>
					<view class="insuarance-bg-t4">原价¥4/人</view>
				</view>
				<view class="insuarance-item" style="position: relative;">
					<view>
						<image class="insuarance-image" src="../../cutout/保@1x.png"></image>
						<view class="insuarance-bg">
							<text class="insuarance-bg-text">限时优惠</text>
						</view>
					</view>
					<view class="insuarance-bg-t1">尊享保障</view>
					<view class="insuarance-bg-t2">30万保额</view>
					<view class="insuarance-bg-t3">
						<view class="insuarance-bg-t31">¥6</view>
						<view class="insuarance-bg-t32">/人</view>
					</view>
					<view class="insuarance-bg-t4">原价¥10/人</view>
				</view>
			</view>
			<view class="insuarance-tip">TIPS：非竞技比赛类可承保（详见投保后保单特约）</view>
		</view>
	</u-popup>
	<!-- 收款方式 -->
	<!-- <u-popup :show="paywayShow" @close="closePayway" :round="18" mode="bottom">
		<view class="popup-container" style="height: 300rpx;">
			<view class="header">
				<view class="header-btn header-left" @click="closePayway">取消</view>
				<view class="header-title">每人费用</view>
				<view class="header-btn right" @click="handlePaywayChange">确定</view>
			</view>
			<view style="height: 24rpx;"></view>
			<picker-view indicator-style="height: 60rpx;" style="width: 100%; height: 300rpx;" :value="[0]" @change="handlePaywayIndexChange">
				<picker-view-column>
					<view v-for="item in paywayCols[0]" style="line-height: 60rpx;font-size: 28rpx;text-align: center;">{{item.label}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</u-popup> -->
	<u-picker :value="formData.payWay" :show="paywayShow" @close="closePayway" @cancel="closePayway"
		@confirm="handlePaywayChange" :closeOnClickOverlay="true" :columns="paywayCols" keyName="label"></u-picker>
	<!-- 退款政策 -->
	<u-picker :value="formData.cancelFreeType" :show="policyShow" @close="closePolicy" @cancel="closePolicy"
		@confirm="handlePolicyChange" :closeOnClickOverlay="true" :columns="policyCols" keyName="label"></u-picker>
	<u-modal :show="showModal" title="提示" content='为方便报名人联系到您,请填写联系电话,我们会严格保密,只有报名成功的用户查看' confirmText="前往填写"
		cancelText="取消" :showCancelButton="false" confirmColor="#F73D00" @confirm="sureConfirm"></u-modal>
	<!--
	<view v-if="formData" class="footer-box">
		 <view class="footer">
			<image
				:src="checked ? 'https://static.wddzq.com/static/check_y.png' : 'https://static.wddzq.com/static/check_b.png'"
				@click="handleCheckClick"></image>
			<text @click="handleCheckClick">我已阅读并同意</text>
			<text @click="handleFBClick">《发布须知》</text>
		</view> 
		<u-button v-if="checked" class="footer-btn" customStyle="height: 88rpx;border-radius: 44rpx;" color="#1c1c1e"
			:text="formData.id ? '修改活动' : '发布活动'" @click="handleSubmit"></u-button>
		<u-button v-else class="footer-btn" customStyle="height: 88rpx;border-radius: 44rpx;background-color: #aaa;"
			color="#fff" text="请勾选发布须知" @click="handleSubmit"></u-button>
	</view> 
	-->
	<view style="height: 82rpx;"></view>
</template>

<script>
	import {
		getActivityCategoryList,
		createActivity,
		getRecMerchantListByCategory,
		getActivityDetail,
		updateActivity
	} from '../../config/api.js';
	import {
		fetchOssUploadToken,
		to,
		uploadFile,
		uploadAfter,
		getDataFormat,
		getUserInfoDetail,
		checkForm
	} from '../../config/utils.js';
	import {
		publishFieldData
	} from '../../config/common.js';

	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				clickB: false,
				clickA: true,
				dropShow: false,
				date: currentDate,
				isProfession: false,
				selectedIndex: -1, // 初始未选中
				offerUser: false,
				subscribeMp: false,
				// 传过来的场地id
				merchantParams: {},
				merchantList: [],
				fileList: [],
				picList: [],
				describePic: [],
				categoryList: [],
				discountType: 0,
				chargeType: 1,
				formType: 1,
				maxManCount: 0,
				maxWomanCount: 0,
				price: '',
				textareaFocus: false,
				mapCtx: null,
				minDate: '',
				maxDate: '2099-12-01',
				startTime: '',
				endTime: '',
				activeDate: '',
				payWayIndex: 0,
				isActive: false,
				// 保存字段
				formData: {
					"address": "",
					"cancelFreeType": 1,
					"categoryId": '',
					"merchantId": '',
					"chargeType": 1,
					// "contactName": "杨伟韦",
					// "contactPhone": "17816866512",
					// "contactWechat": "",
					"coverPic": "https://daya-dev.oss-cn-hangzhou.aliyuncs.com/image/1687439317311-576.png",
					"describeContent": "",
					"describePic": "",
					"discountType": 0,
					"discountedPrice": 0,
					"endDate": '',
					"formType": 1,
					"latitude": '',
					"longitude": '',
					"maxManCount": 0,
					"maxSignUpCount": '',
					"maxWomanCount": 0,
					"payWay": 1,
					"picList": "",
					"price": '',
					"showPublic": true,
					"startDate": '',
					"title": "",
					"type": 1,
					"productId": "",
				},
				ossToken: {
					accessKeyId: '',
					accessKeySecret: '',
					bucket: '',
					region: '',
					stsToken: ''
				},
				paywayShow: false,
				paywayCols: [
					[{
						label: '线上支付',
						value: 1
					}, {
						label: '线下收费',
						value: 2
					}]
				],
				policyShow: false,
				policyCols: [
					[{
						label: '活动开始前',
						value: 1
					}, {
						label: '前30分钟',
						value: 2
					}, {
						label: '前1小时',
						value: 3
					}, {
						label: '前2小时',
						value: 4
					}, {
						label: '前4小时',
						value: 5
					}, {
						label: '前8小时',
						value: 6
					}, {
						label: '前12小时',
						value: 7
					}, {
						label: '前1天',
						value: 8
					}, {
						label: '前2天',
						value: 9
					}, {
						label: '前3天',
						value: 10
					}, {
						label: '前7天',
						value: 11
					}, {
						label: '不可取消',
						value: 100
					}, ]
				],
				// 活动日期
				dateShow: false,
				// 活动形式
				activeTypeShow: false,
				// 每人费用
				feeShow: false,
				// 是否公开
				gkShow: false,
				options: [{
					label: '公开',
					value: '1'
				}, {
					label: '仅俱乐部成员可见',
					value: '2'
				}, {
					label: '仅邀请人员可见',
					value: '3'
				}],
				types: [{
					label: '男女都可',
					value: 1,
				}, {
					label: '仅限女生',
					value: 2
				}, {
					label: '仅限男生',
					value: 3
				}],
				selectedValue: '',
				list: [{
						name: '列表项1',
						isSelected: true
					},
					{
						name: '列表项2',
						isSelected: false
					},
					{
						name: '列表项3',
						isSelected: true
					},
					// ...
				],
				ageArgs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
					11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
					21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
					31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
					41, 42, 43, 44, 45, 46, 47, 48, 49, 50,
					51, 52, 53, 54, 55, 56, 57, 58, 59, 60,
					61, 62, 63, 64, 65, 66, 67, 68, 69, 70,
					71, 72, 73, 74, 75, 76, 77, 78, 79, 80,
					81, 82, 83, 84, 85, 86, 87, 88, 89, 90,
					91, 92, 93, 94, 95, 96, 97, 98, 99,
				],
				checked: false,
				showModal: false,
				noCategoryList: false,
				showInsurance: false,
				showUserRange: false,
				showRequirements: false,
				showActivityType: false,
				showMerchant: false,
				userRangeLabel: '',
				searchValue: '',
			}
		},
		onLoad(e) {

			this.formData = {
				...this.formData,
				type: e.type || 1
			};
			// 处理地图默认值
			var LNGLAT = uni.getStorageSync('LNGLAT');
			if (LNGLAT) {
				this.formData.longitude = LNGLAT.split(",")[0]
				this.formData.latitude = LNGLAT.split(",")[1]
			}

			// 场地进来逻辑
			if (e.merchantId || e.categoryId || e.productId) {
				this.merchantParams = {
					merchantId: e.merchantId,
					categoryId: e.categoryId,
					productId: e?.productId,
				};
				if (e.productId) {
					this.noCategoryList = true;
				}
			}

			// 编辑
			if (e.id) {
				this.id = e.id;
			}


		},
		onShow() {
			this.isProfession = false;
			uni.$off('updateProductId');
			uni.$once('updateProductId', params => {
				this.fetchRecMerchantListByCategory({
					productId: params.productId
				});
				this.noCategoryList = true;
			})
			// 判断微信是否填写
			if (!getUserInfoDetail()?.contactPhone) {
				// this.showModal = true;
			} else {
				this.showModal = false;
			}

		},
		onReady() {
			this.isProfession = false;
			this.fetchActivityCategoryList();
			// this.getOssToken();
			this.checkOfficeUser();

			// 获取场地列表
			this.fetchRecMerchantListByCategory(this.merchantParams);
			let date = new Date();
			this.minDate = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;

			this.fetchActivityDetail();

		},
		methods: {
			searchClick(item) {
				console.log(item, 'item');
				this.searchValue = item;
			},
			// 选择位置
			handleChooseLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success(res) {
								console.log(res);
								that.club = {
									...that.club,
									clubLat: res.latitude,
									clubLng: res.longitude,
									clubAddress: res.address,
									clubLocationName: res.name
								};
							},
							fail(e) {
								console.log(e);
							}
						})
					},
					fail(e) {
						console.log(e);
					}
				});
			},
			handleDateChange(e) {
				const {
					startDate,
					endDate
				} = e;
				let start = new Date(startDate),
					end = new Date(endDate);
				let startStr = start.getFullYear() + '/' + (start.getMonth() + 1) + '/' + start.getDate();
				let endStr = end.getFullYear() + '/' + (end.getMonth() + 1) + '/' + end.getDate();
				const _startDate = new Date(startDate + ' 00:00:00').getTime();
				const _endDate = new Date(endDate + ' 23:59:59').getTime();
				console.log(startStr, endStr);
				this.filterData = {
					...this.filterData,
					startDate: _startDate,
					endDate: _endDate
				};
				this.dateShow = false;
				this.resetActiveList();
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			isProfessionClick() {
				this.isProfession = true;
			},
			isFastClick() {
				this.isProfession = false;
			},
			selectOption(index) {
				this.selectedIndex = index; // 更新选中的索引
			},
			toggleActiveIcon() {
				this.isActive = !this.isActive;
			},
			changeProduct(item) {
				uni.navigateTo({
					url: `/pages/shop-detail/shop-detail?storeId=${item.id}`
				})
			},
			hideScrollView() {
				this.merchantList = [];
				this.merchantParams.categoryId = null;
				this.merchantParams.productId = null;
				// this.formData.categoryId = null;
				this.formData.merchantId = null;
				// this.formData.categoryName = null;
				this.formData.productId = null;
			},
			async fetchActivityDetail() {
				if (!this.id) return;
				const [err, data] = await to(getActivityDetail({
					activityId: this.id
				}));
				if (err) {
					return uni.showToast({
						title: err?.msg || '获取活动详情失败',
						icon: 'error'
					});
				}
				if (data.success && data?.data) {
					this.getDetailData(data?.data);
				} else {
					return uni.showToast({
						title: data?.msg || '获取活动详情失败',
						icon: 'error'
					});
				}
			},
			// 回显数据处理
			getDetailData(data) {

				this.fileList = (data?.coverPic && data?.coverPic.split(',') || []).map(item => ({
					url: item
				}));
				this.picList = (data?.picList && data?.picList?.split('|') || []).map(item => ({
					url: item
				}));
				this.describePic = (data?.describePic && data?.describePic?.split(',') || []).map(item => ({
					url: item
				}));
				this.activeDate = data?.startDate?.split(' ')?.[0] || '';

				let _start = data?.startDate?.split(' ')?.[1] || '';
				let _end = data?.endDate?.split(' ')?.[1] || '';
				if (_start) {
					this.startTime = `${_start.split(':')[0]}:${_start.split(':')[1]}`;
				}
				if (_end) {
					this.endTime = `${_end.split(':')[0]}:${_end.split(':')[1]}`;
				}

				// 活动形式
				this.formType = data?.formType;
				this.maxManCount = data?.maxManCount || 0;
				this.maxWomanCount = data?.maxWomanCount || 0;
				// 自动计算总人数
				this.maxSignUpCount = data?.maxSignUpCount || 0;

				// 每人费用
				this.price = data?.price || 0;
				this.chargeType = data?.chargeType;

				console.log(this.fileList, this.picList, this.describePic, this.activeDate, this.startTime, this.endTime)

				this.formData = {
					...(data || {}),
					name: data?.locationName,
					price: data?.payPrice,
				};

			},
			async fetchRecMerchantListByCategory(params) {
				const [err, merchantList] = await to(getRecMerchantListByCategory(params));
				if (err) {
					return uni.showToast({
						title: err?.msg || '获取场地列表失败',
						icon: 'none'
					})
				}
				const list = (merchantList?.data || []);

				this.merchantList = [
					...(merchantList?.data || []),
				];
				/// 如果时根据套餐过来的，则需要填充默认的数据
				if (params.productId) {
					this.formData = {
						...this.formData,
						categoryId: list[0].categoryId,
						name: list[0].address,
						address: list[0].address,
						merchantId: list[0].id,
						productId: params.productId,
					};
				}
				if (this.merchantParams?.merchantId) {
					let selected = (this.merchantList || []).find(item => `${item.id}` === this.merchantParams
						?.merchantId);
					if (selected) {
						this.handleMerchantClick(selected, true);
					}

				}
			},
			handleCheckClick() {
				this.checked = !this.checked;
			},
			handleFBClick() {
				uni.navigateTo({
					url: `/pages/webview/webview?url=` + encodeURIComponent(
						'https://mp.weixin.qq.com/s?__biz=MzkwMjUwMDE4Mg==&mid=2247483780&idx=1&sn=f9dd83aad40a0161c1f28806848bb391&chksm=c0a5dbbdf7d252ab0e732c90354813887b1e6e830e483c4ca5a7437f67db097dee7a2da33a76#rd'
					)
				})
			},
			sureConfirm() {
				uni.navigateTo({
					url: `/pages/my-info/my-info`
				})
			},
			// 是否官方用户
			checkOfficeUser() {
				let userInfo = getUserInfoDetail();
				this.offerUser = userInfo?.userOffice || false;
				this.subscribeMp = userInfo?.subscribeMp || false;
			},
			async handleUpload(file) {
				const fileData = await uploadAfter(file.file);
				console.log(fileData);

				let fileList = fileData?.filter(item => item.url);
				this.fileList = fileList;
			},
			handleHeaderDel(e) {
				const {
					index
				} = e;
				let fileList = [...this.fileList];
				fileList.splice(index, 1);

				this.fileList = fileList;
			},

			async handleDescribePicUpload(file) {
				const fileData = await uploadAfter(file.file);
				console.log(fileData);

				let describePic = fileData?.filter(item => item.url);
				this.describePic = this.describePic.concat(describePic);
			},
			handleDescribePicDel(e) {
				const {
					index
				} = e;
				let fileList = [...this.describePic];
				fileList.splice(index, 1);

				this.describePic = fileList;
			},
			async handlePicUpload(file) {
				const fileData = await uploadAfter(file.file);

				let fileList = fileData?.filter(item => item.url);
				this.picList = this.picList.concat(fileList);
			},
			handlePicDel(e) {
				const {
					index
				} = e;
				let picList = [...this.picList];
				picList.splice(index, 1);

				this.picList = picList;
			},
			closePayway() {
				this.paywayShow = false;
			},
			openPayway() {
				this.paywayShow = true;
			},
			openDate() {
				// this.dateShow = true;
				this.$refs.activeDate.show();
			},
			openStartTime() {
				this.$refs.startTime.show();
			},
			openEndTime() {
				this.$refs.endTime.show();
			},
			handleStartTimeChange(e) {
				if (!this.activeDate) {
					return uni.showToast({
						title: "请先选择活动日期",
						icon: 'none'
					})
				}
				this.startTime = e.result;
			},
			handleEndTimeChange(e) {
				if (!this.activeDate) {
					return uni.showToast({
						title: "请先选择活动日期",
						icon: 'none'
					})
				}
				this.endTime = e.result;
			},
			// closeStartTime() {
			// 	this.startTimeShow = false;
			// },
			// closeEndTime() {
			// 	this.endTimeShow = false;
			// },
			closeDate() {
				this.dateShow = false;
			},
			// 活动形式
			openActiveType() {
				this.activeTypeShow = true;
			},
			closeActiveType() {
				this.activeTypeShow = false;
				this.maxManCount = this.formData.maxManCount;
				this.maxWomanCount = this.formData.maxWomanCount;
				this.formType = this.formData.formType;
			},
			handleActiveTypeClick() {
				this.formData = {
					...this.formData,
					formType: this.formType,
					maxManCount: this.maxManCount,
					maxWomanCount: this.maxWomanCount,
					// 自动计算总人数
					maxSignUpCount: this.maxManCount + this.maxWomanCount,
				};
				this.activeTypeShow = false;
			},
			handleType(value) {
				console.log(value);
			},
			handleChargeType(chargeType) {
				// 免费
				if (chargeType === 2) {
					this.price = 0;
				}
				this.chargeType = chargeType;
			},
			openGK() {
				this.gkShow = true;
			},
			closeGK() {
				this.gkShow = false;
			},
			openFee() {
				this.feeShow = true;
			},
			closeFee() {
				this.feeShow = false;
				this.price = this.formData.price;
			},
			closeInsurance() {
				this.showInsurance = false;
			},
			closeUserRange() {
				this.showUserRange = false;
			},
			closeRequirements() {
				this.showRequirements = false;
			},
			closeActivityType() {
				this.showActivityType = false;
			},
			closeMerchant() {
				this.showMerchant = false;
			},
			// 退款政策
			closePolicy() {
				this.policyShow = false;
			},
			openPolicy() {
				this.policyShow = true;
			},
			// 活动标题
			handleTitleChange(value) {
				this.formData = {
					...this.formData,
					title: value
				}
			},
			// 描述
			handleContentChange(value) {
				this.formData = {
					...this.formData,
					describeContent: value
				}
			},
			handleTextareaFocus() {
				this.textareaFocus = true;
			},
			handleTextareaBlur() {
				this.textareaFocus = false;
			},
			// 活动类型change
			handleActivityClick(e) {
				const {
					id
				} = e?.currentTarget?.dataset?.item || {};
				this.formData = {
					...this.formData,
					categoryId: id
				};
				this.fetchRecMerchantListByCategory({
					categoryId: id
				});
			},
			// 打开场地也没
			handleOpenMerchantClick(id) {
				uni.navigateTo({
					url: `/pages/shop-detail/shop-detail?storeId=${id}`
				})
			},
			/**
			 * 场地change
			 * @param {Object} data
			 * @param {Object} setCategory 是否设置活动类型
			 */
			handleMerchantClick(data, setCategory) {
				let params = {
					merchantId: '',
					latitude: '',
					longitude: '',
					address: '',
					name: '',
				};
				if (data) {
					const {
						id,
						address,
						latitude,
						longitude,
						locationName,
						categoryId,
						categoryName,
						merchantProductVO
					} = data;
					const {
						id: productId
					} = merchantProductVO ?? {};
					params = {
						merchantId: id,
						latitude,
						longitude,
						address,
						productId,
						name: locationName,
					};
					if (setCategory) {
						params.categoryId = categoryId;
						params.categoryName = categoryName;
						params.productId = productId;
						this.merchantParams = {};
					}
				}
				this.formData = {
					...this.formData,
					...params
				};
			},
			// 选择位置
			handleChooseLocation() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success(res) {
								console.log(res);
								that.formData = {
									...that.formData,
									latitude: res.latitude,
									longitude: res.longitude,
									address: res.address,
									name: res.name
								};
							},
							fail(e) {
								console.log(e);
							}
						})
					},
					fail(e) {
						console.log(e);
					}
				});

			},

			// 活动日期
			handleDateChange(e) {
				console.log(e);
				const {
					result
				} = e || {};
				// this.formData = {
				// 	...this.formData,
				// 	startDate: new Date(result).getTime(),
				// 	endDate: new Date(result).getTime(),
				// };
				this.activeDate = result;

				// return;
				// const { value } = e || {};
				// const [date, hour, mintue] = value || [];
				// if(date && hour && mintue) {
				// 	const _date = new Date();
				// 	console.log(date, hour, mintue);
				// 	let [month, day] = date.value.split('-');
				// 	const endDate = new Date(`${_date.getFullYear()}-${month}-${day} ${hour.value}:${mintue.value}`).getTime();
				// 	this.formData = {
				// 		...this.formData,
				// 		endDate,
				// 	};
				// }
				// this.dateShow = false;
			},

			// 活动时间
			handleTimeChange(e) {
				console.log(e);
			},
			// 是否公开
			handleGKChange(e) {
				const {
					value
				} = e;
				const {
					value: _value
				} = value[0];

				this.formData = {
					...this.formData,
					isGk: _value,
					showPublic: _value === '1' ? true : false
				}
				this.gkShow = false;
			},

			handlePaywayIndexChange(e) {
				const {
					value
				} = e.detail;
				const index = value[0];
				this.payWayIndex = index;
			},

			// 付款方式
			handlePaywayChange(e) {
				const {
					value
				} = e;
				const {
					value: _value
				} = value[0];

				this.formData = {
					...this.formData,
					payWay: _value, //this.paywayCols[0][this.payWayIndex]?.value
				}
				this.closePayway();
			},

			//活动形式
			handleTypeChange(e) {
				const {
					value
				} = e?.currentTarget?.dataset?.item || {};
				if (value === 1) {
					this.maxWomanCount = 0;
					this.maxManCount = 0;
				}
				// 仅限男生
				if (value === 2) {
					this.maxWomanCount = 0;
				}
				// 仅限女生
				if (value === 3) {
					this.maxManCount = 0;
				}
				this.formType = value;
				// this.formData = {
				// 	...this.formData,
				// 	formType: value
				// };
			},

			// 退款政策
			handlePolicyChange(e) {
				const {
					value
				} = e;
				const {
					value: _value
				} = value[0];

				this.formData = {
					...this.formData,
					cancelFreeType: _value
				}
				this.closePolicy();
			},

			// 男生数量
			handleManChange(value) {
				let count = value.value;

				this.maxManCount = count;
				// this.formData = {
				// 	...this.formData,
				// 	maxManCount: count
				// };
			},
			// 女生数量
			handleWomanChange(value) {
				let count = value.value;
				// if(value.type === 'plus') {
				// 	count = count + 1;
				// } else {
				// 	count = count - 1;
				// }
				this.maxWomanCount = count;
				console.log(this.maxWomanCount, count);
				// this.formData = {
				// 	...this.formData,
				// 	maxWomanCount: count
				// };
			},

			// 活动人数
			handleNumberChange(value) {
				console.log(value);
				this.formData = {
					...this.formData,
					maxSignUpCount: value
				};
			},

			// 价格
			handlePriceChange(value) {
				this.price = value;

			},

			handlePriceClick() {
				this.formData = {
					...this.formData,
					price: this.price,
					chargeType: this.chargeType
				};
				this.feeShow = false;
			},
			handleInsuranceClick() {
				this.showInsurance = false;
			},
			handleUserRangeClick(e) {
				console.log(e)
				this.showUserRange = false;
				this.userRangeLabel = e;
			},
			handleRequirementsClick() {
				this.showRequirements = true;
			},
			handleActivityTypeClick() {
				this.showActivityType = false;
			},
			handleMerchantClick() {
				this.showMerchant = false;
			},
			// 是否优惠
			handleDiscountSwitchChange(value) {
				let data = {};
				// 没有优惠，置为0
				if (value === 0) {
					data.discountedPrice = 0;
				}
				data.discountType = value;
				// this.discountType = value;
				this.formData = {
					...this.formData,
					...data
				};
			},

			// 优惠金额
			handleDiscountChange(value) {
				this.formData = {
					...this.formData,
					discountedPrice: value
				};
			},

			async handleSubmit() {

				if (!this.checked) {
					return uni.showToast({
						title: '请先勾选发布须知'
					})
				}

				let params = {
					...this.formData,
					coverPic: this.fileList.map(item => item.url).join(','),
					picList: this.picList.map(item => item.url).join(','),
					describePic: this.describePic.map(item => item.url).join(','),
					activeDate: this.activeDate,
					startTime: this.startTime,
					endTime: this.endTime
				};

				// 校验
				const msg = checkForm(publishFieldData, params);
				console.log(params);
				if (msg) {
					return uni.showToast({
						title: msg,
						icon: 'none'
					})
				}
				let startDate = `${this.activeDate} ${this.startTime}`.replace(/-/g, '/');
				let endDate = `${this.activeDate} ${this.endTime}`.replace(/-/g, '/');
				params.startDate = new Date(startDate).getTime();
				params.endDate = new Date(endDate).getTime();

				let request = this.formData.id ? updateActivity : createActivity;

				const [err, data] = await to(request(params));
				if (err) {
					return uni.showToast({
						title: err?.msg || '创建活动失败',
						icon: 'none'
					})
				}
				if (data.success) {
					uni.showToast({
						title: '创建成功！快联系组织者沟通活动细节吧！'
					})
					console.log(this.formData.type)
					if (this.formData.type == 1) {
						uni.switchTab({
							url: '/pages/index/index'
						})
					} else if (this.formData.type == 2) {
						uni.switchTab({
							url: '/pages/party/party'
						})
					} else {
						uni.navigateBack();
					}
				} else {
					uni.showToast({
						title: data?.msg || '创建活动失败',
						icon: 'none'
					})
				}
			},

			// 获取文件密钥
			async getOssToken() {
				const [err, ossData] = await to(fetchOssUploadToken());
				if (err) {
					uni.showToast({
						title: err?.msg || '获取密钥失败！'
					})
					return;
				}
				if (ossData.success) {
					this.ossToken = ossData?.data || {};
					this.uploadFile(ossData?.data);
				}
			},
			uploadFile(ossData) {
				uni.chooseImage({
					count: 9,
					sizeType: "original",
					success: res => {
						console.log(res.tempFilePaths);


					}
				})
			},
			async fetchActivityCategoryList() {
				const [err, activityCategory] = await to(getActivityCategoryList());
				if (err) return;
				this.categoryList = [
					...(activityCategory?.data || [])
				];
			},
		}
	}
</script>

<style scoped style="scss">
	.boxall {
		position: relative;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.box1 {
		width: 22%;
		box-sizing: border-box;
		margin-right: 20rpx;
		margin-bottom: 10rpx;
		height: 44px;
		border-radius: 7px;
		background: #F5F5F5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.text1 {
		font-size: 13px;
		line-height: 15px;
		color: #000000;
		height: 15px;
		margin: 0 auto;
	}

	.city-list {
		position: relative;
		background-color: #fff;
		width: 100%;
		height: 110rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;
	}

	.city-list-label {
		position: relative;
		font-size: 30rpx;
		font-weight: 500;
		color: #666363;
		width: 120rpx;
		height: 44rpx;
		line-height: 44rpx;
		margin-right: 30rpx;
		z-index: 99;
	}

	.city-list-label.active {
		width: 144rpx;
		height: 52rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #3D3D3D;
		line-height: 52rpx;
		position: relative;
	}

	.city-list-label.active::before {
		position: absolute;
		content: ' ';
		bottom: 0;
		left: 0;
		width: 100%;
		height: 12rpx;
		background: #64D2D8;
	}

	.tui-header-icon {
		width: 120rpx;
		height: 32px;
		position: fixed;
		top: 0;
		left: 20rpx;
		padding: 0 12rpx;
		display: flex;
		align-items: center;
		transform: translateZ(0);
		z-index: 99999;
		box-sizing: border-box;
		animation: fade-in .5s ease;
	}

	.tui-header {
		width: 100%;
		height: 64rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;
		z-index: 100000;
	}

	.tui-header-top {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 26rpx;
		color: #333;
		height: 64rpx;
		position: relative;
	}

	.tui-sort-dropdown {
		position: absolute;
		top: 64rpx;
		left: 0;
		z-index: 10000;
		width: 100%;
		background-color: #fff;
		border-bottom-left-radius: 18rpx;
		border-bottom-right-radius: 18rpx;
		animation: fade-in .3s ease;
		animation: fade-Y .3s ease;
	}

	.tui-scroll-box {
		background-color: #fff;
	}

	.tui-drop-item {
		margin-left: 24rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 28rpx;
		color: #000;
		padding-left: 20rpx;
	}

	.tui-drop-item.active {
		color: #ffb803;
	}

	.searchView {
		position: relative;
		width: 348px;
		height: 32px;
		border-radius: 28rpx;
		background-color: #FFFFFF;
	}

	.flex-middle {
		justify-content: center;
		align-items: center;
		align-self: center;
		align-content: center;
	}

	.flex-display {
		display: flex;
	}

	.searchType {
		border-radius: 36rpx;
		height: 64rpx;
		background-color: #f5f5f5;
		z-index: 2;
	}

	.tips {
		color: #BABABA;
		font-size: 12px;
		font-weight: normal;
		width: 48px;
		height: 15px;
	}

	.icon-color {
		color: #CDCDCD;
	}

	.icon-color.activeIcon {
		color: red;
	}

	.item {
		line-height: 100rpx;
		height: 100rpx;
		text-align: center;
	}

	.tui-sort-time {
		width: 100%;
		background-color: #fff;
		border-bottom-left-radius: 18rpx;
		border-bottom-right-radius: 18rpx;
		animation: fade-in .3s ease;
		animation: fade-Y .3s ease;
	}

	.group-btn {
		position: relative;
		padding: 0rpx 20rpx 28rpx;
		color: #64D2D8;
		font-size: 30rpx;
		height: 96rpx;
	}

	.group-btn button {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		border: none;
		cursor: pointer;
		border-radius: 28rpx;
		height: 100rpx;
		background-color: #fff;
		color: #64D2D8;
	}

	.option {
		padding: 50rpx 0 0 28rpx;
		position: relative;
		cursor: pointer;
	}

	.checkmark {
		position: absolute;
		top: 50rpx;
		right: 36rpx;
		width: 32rpx;
		display: flex;
	}

	.mt-50 {
		margin-top: 50rpx;
	}

	.mt-40 {
		margin-top: 40rpx;
	}

	.mb-40 {
		margin-bottom: 40rpx;
	}

	.tabs {
		width: 696rpx;
		height: 88rpx;
		border-radius: 28rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 3px;
		flex-direction: row;
		align-items: center;
	}

	.tabs-item {
		margin: 8rpx 6rpx 6rpx;
		width: 342rpx;
		height: 74rpx;
		border-radius: 18rpx;
		background: #fff;
		justify-content: center;
		cursor: pointer;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	/* .tabs-item:active,
	.tabs-item:hover {
		background: linear-gradient(90deg, #87EFF1 0%, #77F7B4 99%);
	} */
	.active-tabs-item {
		background: linear-gradient(90deg, #87EFF1 0%, #77F7B4 99%);
	}

	.button-icon {
		height: 26rpx;
		width: 26rpx;
	}

	.active-info {
		margin: 18rpx 24rpx;
		padding: 0 22rpx 0 30rpx;
		border-radius: 18rpx;
		background-color: #fff;
	}

	.images-box {
		margin: 20rpx 24rpx;
		padding: 48rpx 30rpx;
		border-radius: 28rpx;
		background-color: #fff;
	}

	.scroll-view-wrapper {
		position: relative;
	}

	.hide-scroll-view {
		position: absolute;
		width: 32rpx;
		height: 32rpx;
		top: 0;
		right: 0;
		z-index: 0;
	}

	.title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 24rpx;
	}

	.active-info {}

	.active-type {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 120rpx;
		height: 52rpx;
		font-size: 28rpx;
		color: #333;
		/* padding: 6rpx 35rpx; */
		background-color: #f2f2f2;
		border-radius: 52rpx;
		margin-right: 20rpx;
	}

	.active-type.active {
		background-color: #ffb803;
	}

	.active-type-list {
		display: flex;
		/* margin-bottom: 54rpx; */
		/* margin-top: 50rpx; */
	}

	.active-type-item {
		font-size: 28rpx;
		color: #333;
		padding: 0 32rpx;
		height: 52rpx;
		background-color: #f2f2f2;
		border-radius: 52rpx;
		display: flex;
		align-items: center;
		margin-right: 24rpx;
	}

	.active-type-item.active {
		background-color: #ffb803;
	}

	.shop-list {
		display: flex;
	}

	.shop-item {
		width: 420rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 16rpx;
		margin-right: 16rpx;
		display: flex;
		flex-direction: column;
		border: 1rpx solid #DDDDDD;
	}

	.shop-item-top-wrapper {
		display: flex;
	}

	.shop-item-bottom-wrapper {
		display: flex;
		flex-direction: column;
		margin: 16 rpx 16 rpx 0;
		background: rgba(255, 143, 31, .08);
		border-radius: 8rpx;
		padding: 16rpx;
	}

	.product-name {
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		padding-bottom: 20rpx;
	}

	.product-info-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.product-price-wrapper {
		display: flex;
		align-items: baseline;
		margin-right: 4rpx;
	}

	.product-price-unit {
		font-size: 22rpx;
		font-weight: 600;
		color: #FF8F1F;
	}

	.product-price {
		font-size: 34rpx;
		font-weight: 600;
		color: #FF8F1F;
	}

	.product-tag {
		font-size: 20rpx;
		font-weight: 500;
		color: #FF8F1F;
		padding: 0 8rpx;
		height: 34rpx;
		line-height: 34rpx;
		background: rgba(255, 143, 31, 0.1);
		border-radius: 8rpx;
		border: 1rpx solid rgba(255, 143, 31, 0.3);
		margin-right: 8rpx;
	}

	.product-info-left-wrapper {
		display: flex;
		align-items: center;
	}

	.product-original-price {
		font-size: 26rpx;
		font-weight: 400;
		color: #AAAAAA;
		text-decoration: line-through;
	}

	.change-product-btn {
		height: 36rpx;
		line-height: 36rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		border: 1rpx solid #030303;
		font-size: 20rpx;
		font-weight: bold;
		color: #030303;
		padding: 0 24rpx;
	}

	.shop-item.merchant-active {
		border: 1rpx solid #333333;
	}

	.shop-item image {
		width: 140rpx;
		height: 130rpx;
		margin-right: 16rpx;
		border-radius: 5rpx;
		background-color: #f2f2f2;
	}

	.shop-content {
		flex: 1;
		position: relative;
	}

	.shop-content .shop-title {
		/* width: 232rpx; */
		width: 100%;
		height: 36rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		line-height: 36rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-bottom: 8rpx;
	}

	.shop-content .shop-desc {
		width: 100%;
		max-height: 60rpx;
		font-size: 22rpx;
		font-weight: 400;
		color: #999999;
		line-height: 30rpx;
		overflow: hidden;
	}

	.shop-content .shop-desc .u-button__text {
		font-size: 20rpx;
	}

	/* 单元格 */
	.t-cell {
		display: flex;
		height: 100rpx;
		align-items: center;
	}

	.t-cell image {
		width: 28rpx;
		height: 28rpx;
		border: 8rpx solid #d9d9d9;
		border-radius: 36rpx;
	}

	.t-cell .t-cell-content {
		flex: 1;
		font-size: 30rpx;
		color: #000000;
		font-weight: 500;
	}

	.t-cell .t-cell-text {
		font-size: 28rpx;
		color: #666;
	}

	.t-cell-content-time {
		display: flex;
		align-items: center;
	}

	.sex-type {
		display: flex;
	}

	.sex-type-item {
		display: flex;
		flex: 1;
		height: 108rpx;
		align-items: center;
		justify-content: center;
		background-color: #f2f2f2;
		border-radius: 18rpx;
		margin-right: 14rpx;
	}

	.sex-type-item image {
		width: 48rpx;
		height: 48rpx;
		margin-right: 6rpx;
	}

	.sex-type-item text {
		font-size: 32rpx;
		color: #000;
	}

	.header {
		display: flex;
	}



	.header-left {}

	.header-right {}

	.header-title {
		flex: 1;
		font-size: 36rpx;
		color: #3D3D3D;
		font-weight: 500;
		text-align: center;
		height: 52rpx;
	}

	.header-btn {
		font-size: 28rpx;
		color: #8E8E8E;
		height: 30rpx;
		line-height: 30rpx;
	}

	.popup-container {
		padding: 48rpx 24rpx;
	}

	.insuarance-item {
		width: 224rpx;
		height: 304rpx;
		margin: 28rpx 0 42rpx;
		border-radius: 28rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 2rpx solid #ECEBEA;
	}

	.insuarance-item.active {
		border: 2rpx solid #64D1CE;
	}

	.insuarance-image {
		width: 90rpx;
		height: 90rpx;
	}

	.insuarance-bg {
		position: absolute;
		width: 106rpx;
		height: 42rpx;
		right: 0;
		top: 0;
		color: #ECEBEA;
		border-radius: 0px 28rpx 0px 28rpx;
		background: rgba(237, 237, 237, 0.2);
		border-bottom: 1px solid #ECEBEA;
		border-left: 1px solid #ECEBEA;
	}

	.insuarance-bg-text {
		/* color: #ECEBEA; */
		position: absolute;
		right: 0;
		top: 0;
		font-size: 11px;
		padding: 0 5px 0 4px;
		line-height: 42rpx;
		height: 42rpx;
	}

	.insuarance-bg-t1 {
		font-size: 24rpx;
		color: #000000;
		line-height: 42rpx;
		height: 42rpx;
		padding-left: 28rpx;
	}

	.insuarance-bg-t2 {
		color: #000000;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 42rpx;
		height: 42rpx;
		padding-left: 26rpx;
		margin: 18rpx 0 24rpx;
	}

	.insuarance-bg-t3 {
		display: flex;
	}

	.insuarance-bg-t31 {
		margin-left: 27rpx;
		font-size: 28rpx;
		color: #DB5917;
	}

	.insuarance-bg-t32 {
		color: #000000;
		font-size: 24rpx;
		line-height: 42rpx;
		height: 42rpx;
	}

	.insuarance-bg-t4 {
		color: #B4B4B4;
		font-size: 24rpx;
		line-height: 42rpx;
		height: 42rpx;
		margin-left: 24rpx;
		text-decoration: line-through;
	}

	.insuarance-tip {
		font-size: 24rpx;
		height: 30rpx;
		line-height: 30rpx;
		color: #BABABA;
	}

	.money-box,
	.yh-box {
		height: 88rpx;
		background-color: #f2f2f2;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		padding: 0 18rpx;
	}

	.money-box text,
	.yh-box text {
		font-size: 28rpx;
		color: #333;
	}

	.money-box text.money-title,
	.yh-box text.money-title {
		flex: 1;
	}

	.yh-box {
		background-color: #f2f2f2;
		border-radius: 12rpx;
		margin-left: 58rpx;
	}


	.footer-box {
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		/* padding: 26rpx 24rpx; */
		/* background-color: #fff; */
		box-sizing: border-box;
		box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0, 0, 0, 0.05);
	}

	.footer-btn {}

	.footer {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.footer image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.footer text {
		font-size: 28rpx;
		color: #000;
	}

	.footer text:last-child {
		font-size: 28rpx;
		color: #0074fc;
	}

	.input-flex {
		flex: 1;
	}
</style>